<template>
  <div>
    <a-form
      class="contorller-wrap"
      layout="inline"
    >
      <a-form-item label="数据中心">
        <a-select
          v-model="datacenterId"
          style="min-width: 200px;"
          :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
          @change="(v) => loadDataByDatacenterId(v)"
        >
          <a-select-option
            v-for="item in datacenterList"
            :key="'datacenter_' + item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

    <div>
      <div class="chart-box">
        <div style="margin-top: 45px; width: 32%;">
          <StatisticsLine
            :key="0"
            :meter="meterMap[0]"
            :sourceList="resourceData[meterMap[0].key]"
          />
        </div>

        <div style="margin-top: 45px; width: 32%;">
          <Gauge
            :loadVal="loadVal || 0"
            title="配电子网负荷"
          />
        </div>

        <div style="margin-top: 45px; width: 32%;">
          <StatisticsLine
            :key="1"
            :meter="meterMap[1]"
            :sourceList="resourceData[meterMap[1].key]"
          />
        </div>

        <div style="margin: 40px 0; width: 48%;">
          <StatisticsLine
            :key="2"
            :meter="meterMap[2]"
            :sourceList="resourceData[meterMap[2].key]"
          />
        </div>

        <div style="margin: 40px 0; width: 48%;">
          <StatisticsLine
            :key="3"
            :meter="meterMap[3]"
            :sourceList="resourceData[meterMap[3].key]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { gPostAction } from "@/api/manage";
  import Gauge from './modules/chart/Gauge'
  import StatisticsLine from './modules/chart/StatisticsLine'

  export default {
    name: 'Overview',
    components: { Gauge, StatisticsLine },
    data() {
      return {
        datacenterId: '',
        datacenterList: [],
        loadVal: '',
        resourceData: {
          'environment.power': [],
          'datacenter.power': [],
          'datacenter.temperature': [],
          'datacenter.load': []
        },
        meterMap: [{
          id: 0,
          key: 'environment.power',
          name: '动环能耗',
          unit: 'KWH'
        }, {
          id: 1,
          key: 'datacenter.power',
          name: '数据中心能耗',
          unit: 'KWH'
        }, {
          id: 2,
          key: 'datacenter.temperature',
          name: '数据中心温度',
          unit: '℃'
        }, {
          id: 3,
          key: 'datacenter.load',
          name: '数据中心配电子网负荷',
          unit: 'KW'
        }]
      }
    },
    mounted() {
      this.loadDatacenterList()
    },
    methods: {
      loadDatacenterList() {
        this.datacenterList = []

        gPostAction("/asset/pageDatacenter", { pageSize: 99 }).then((res) => {
          this.datacenterList.push(...res.data.list)
          const item = this.datacenterList[0]
          this.datacenterId = item.id
          this.loadDataByDatacenterId(item.id)
        })
      },
      loadDataByDatacenterId(id) {
        this.loadGaugeData(id)

        this.meterMap.forEach(meter => {
          this.loadStatisticsData(id, meter.key)
        })
      },
      loadGaugeData(id) {
        const postData = {
          meter: 'datacenter.load',
          resourceId: id,
        }

        gPostAction("/statistics/latestSamples", postData).then((res) => {
          if (res.success) {
            this.loadVal = parseFloat(res.data[0].volume.toFixed(2))
          }
        })
      },
      loadStatisticsData(id, meter) {
        const postData = {
          meter,
          resourceId: id,
        }

        gPostAction("/statistics/statistics", postData).then((res) => {
          if (res.success) {
            this.resourceData[meter] = res.data.list[0].points
          }
        })
      },
    }
  }
</script>

<style
  lang="less"
  scoped
>
  .contorller-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ant-form-item {
      margin-right: 0;
    }
  }

  .chart-box {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    width: 100%;
  }
</style>